IconBuilder is the tool we use to create all the icon sets available at the Iconfactory. The foreman has a cookbook full of recipes that he uses to concoct his iconic treats, and he shares a few of them in this section. You can use these recipes to create your own special icons.
For more recipes and hints for using IconBuilder, please visit the IconBuilder FAQ page at www.iconfactory.com:
32-bits con Carne
w do you suggest I make my first icon with IconBuilder?
Here is a very simple, step-by-step recipe for making a spicy 32-bit icon:
1) In Adobe Photoshop, create a new 32x32 pixel document.
2) Within that document create a new, blank layer on which to work.
3) Create (draw or paste in) your icon. Get it shaded and cropped correctly. Make sure to fully erase any stray pixels outside of the icon's outline. An easy way to do this is to turn off the Background layer so you can see your transparent "checkerboard" pattern under your layer.
4) Select all.
5) Run IconBuilder from the "Filters" menu.
6) Once inside IconBuilder click the "QuickBuild" button and watch the various cells of the icon grid fill up. You'll note that it created the small or 16x16 pixel icons for you as well. No doubt that the view of these sizes that were created isn't where you expected.
7) Click to select the 32-bit, small icon cell.
8) Use the keyboard's arrow keys to move the icon around until you get the cropping you want
9) Press and hold the "Shift" key and with the mouse, click the "QuickBuild" button again. IconBuilder rebuilds the entire column for you using this newly aligned small icon.
10) Click on the "Save" button, name your file and save it to your Mac's desktop.
11) Click the "Done" button to exit IconBuilder and go back out to Photoshop. You're done!.
Folder Souffle
Do you have an application who's folder icon looks terrible in a Finder view with the new 32-bit icons?
This delicious recipe will create a new 32-bit folder icon for an application:
1) Start out with two blank layers. One layer will hold the folder icon and the other will hold the application icon. Make sure both layers are visible.
2) Run IconBuilder on the bottom-most layer.
3) Import a blank folder icon from your Mac's desktop (use the Choose button when you see the one you want). This folder will be used as a template. Select the "large/32-bit" in the center icon grid. Next, use the "Apply View to Photoshop Layer" button and you'll see the icon appear in the blank layer out in Photoshop.
4) Select the top-most layer and run IconBuilder again.
5) Next, click the Import button and select the application icon that will eventually go on top of the folder you're creating. Select a "small" version of this icon from the grid and click the "Apply" button again.
6) Back out in Photoshop, move the small icon in the top layer around until it's lined up where you want it. Then, Merge the two visible layers into one.
7) Run IconBuilder on the combined layer.
8) Do a QuickBuild‚Ñ¢ and save your new icon.
9) In the Finder, copy the new icon using Get Info. You can then paste the icon on the applications folder.
Icons au Gratin
IconBuilder slices and dices when it's creating the 16x16 small version of the icon. For those of you who want to cook up a scaled version of 32x32 large icon, you can run this through your food processor:
1) Create large icon on a Photoshop layer.
2) Run IconBuilder. Do a QuickBuild for the large versions (select one of the large icons and use Shift-QuickBuild).
3) Use "Save" to put the large version of the icon in a file. Click on "Done" to return to Photoshop.
4) Duplicate the layer with your large icon.
5) Take duplicate layer and scale it down. The easiest way is with Layer -> Transform -> Numeric. You can experiment with the "Scale" parameters; 50% for width and height is a good place to start.
6) Run IconBuilder on the duplicate layer (with the scaled down version of your icon). The last version of your icon, with the large icons, will load automatically
7) Select one of the empty cells for the small icons and do a Shift-QuickBuild. You can now "Save" the completed icon.
Cooking Tips
The foreman has several cooking tips that will make your recipes turn out "just right". Don't overcook those icons!
Start with 256 color versions
We've found through experience that its best to start with the 32x32 sized, 256 color icon when you begin to make an individual icon. Its always easier to start with a lower "base" model and add onto it than to start with the best possible looking icon and "dumb it down". What does this mean? Start your creation process by getting the 256 version to look right and THEN add the flashy gradients and smooth edges of 32-bit icons. Remember, the vast majority of users will only see the 256 versions.
Adding custom list view icons
If you're an icon perfectionist, like the factory workers are, then you'll want your small, list view icons to look as good as your 32x32 sized icons. This means not simply cropping the larger versions to fit (as that sometimes is the case) but instead to design the smaller icon versions by hand. When working with IconBuilder, its best to always use a 48x48 sized canvas and build each of your different icon sizes and bit depths on their own layers. In this way, you can do a QuickBuild to get all the basic shapes and masks into the icon grid, but then you can go back and add each custom size and depth manually until it's perfect.
Timesaving techniques
1) QuickBuild is powerful, but it won't do everything for you. You'll need to sometimes add custom resources one by one.
2) Know your modifier keys (they are discussed in the next section). These can save you a great deal of time in the long run.
3) Always keep a copy of your layers file saved in a safe place. If you have to recreate an icon, the individual layers will be a blessing in disguise.
4) Don't forget to view your work against both dark and light background textures. This helps you pinpoint mask errors and stray pixels.
The joys of Photoshop layers
Making a custom icon from individual layers is one of the best ways to manipulate an icon. Whether your making icons for corporate clients, or just for fun, having portions of your icons on different layers really helps to be able to quickly and easily move things around, recolor or resize. Keeping your layers safe means that you can always rebuild your icon with just a few keystrokes instead of having to redraw or modify the entire image.
Use Photoshop to your advantage
Some good advice when making icons from layers in Photoshop:
1) Always remember to name individual layers. It can get easy to loose track of what is what if you don't label each layer accordingly.
2) If you don't already have the checkerboard pattern turned on in layers, turn it on. It is much easier to spot semitransparent pixels against the checkerboard pattern than against the white of the background layer.
3) Experiment with the opacity settings of a layer to help achieve the proper settings for masking.
4) Always use a 48x48 sized canvas or larger. Not only will this help in positioning the "large" view icons if you need to nudge them, but later on when Mac OS X comes out, you'll already be used to the larger 48x48 icon size.
Don't add resources you don't need
Not all icons need every resource. Consider your audience and add resources appropriately. Not all icons need 32-bit versions. If you're making an icon for Mac OS 8.1 or lower, delete (or just don't add) the 32-bit resources to the icon grid. Doing so will add unnecessary file size to the icon. Remember that Shift/Control modifier keys will also work with deleting.
See icon file sizes as you build
Click on the small Iconfactory logo next to the BuilderTips at the bottom of the interface to turn off the roll over help messages. In its place, will be displayed a constant message about the current file size of the icon you're working on. Watch the numbers increase as you add resources to the icon grid.
